<!-- 筛选 -->
<template>
	<view>
		<view class="prefer-posi">
			<view class="delica-view">
				<view class="delica-list delica-grow" @click="multiple()" >
					<text>综合排序</text>
					<image src="../static/icon/paixu.png" mode="widthFix"></image>
				</view>
				<view class="delica-grow" @click="saLes()">销量高</view>
				<view class="delica-grow" @click="saLes()">速度快</view>
				<view class="delica-grow" @click="saLes()">津贴联盟</view>
				<view class="delica-list delica-right" @click="scReen()">
					<text>筛选</text>
					<image src="../static/icon/筛选.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 综合排序 -->
			<view class="sortlist sortliteltle" v-if="drop">
				<block v-for="(item,index) in sortlist" :key="index">
					<text :class="{activeb:index == num}" @click="sortClick(index,item,name)">{{item.name}}</text>
				</block>
			</view>
			<!-- 多个筛选区 -->
			<view class="sortlist sortlist-view" v-if="sortmen">
				<!-- 多选：商家特色 -->
				<block v-for="(item,index) in screendata" :key="index">
					<view>
						<view class="sortlist-title">{{item.title}}</view>
						<view class="sortlist-flex">
							<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
								<text class="choice">{{itemdata.name}}</text>
							</block>
						</view>
					</view>
				</block>
				<!-- 单选 -->
				<block v-for="(item,index) in person" :key="index">
					<view>
						<view class="sortlist-title">{{item.title}}</view>
						<view class="sortlist-flex">
							<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
								<text class="choice">{{itemdata.name}}</text>
							</block>
						</view>
					</view>
				</block>
				<!-- 置顶 -->
				<view class="sortlist-bottom">
					<text>清空</text>
					<text>完成</text>
				</view>
			</view>
		</view>
		<!-- 透明背景 -->
	<view class="yin" v-if="ying" @click="backClic()"></view>
	</view>
</template>

<script>
	export default {
		name: "delicacy",
		data() {
			return {
				drop: false,
				num:'',
				sortmen:'',
				
				sortlist: [{
						"name": "起送价最低",
						"screen": "delivering",
						"nums": 1
					},
					{
						"name": "配送费最低",
						"screen": "physical",
						"nums": 1
					},
					{
						"name": "人均高到低",
						"screen": "capita",
						"nums": -1
					},
					{

						"name": "人均低到高",
						"screen": "capita",
						"nums": 1
					},
				],
				//多选
				screendata: [{
					"title": "商家特色（可多选）",
					"datas": [{
							"id": 1,
							"sign": "duration",
							"name": "配送最快"
						},
						{
							"id": 1,
							"sign": "deliver",
							"name": "0元起送"
						},
						{
							"id": 1,
							"sign": "physi",
							"name": "免配送费"
						},
					]
				}],
				// 人均价
				person: [{
					"title": "人均价",
					"datas": [{
							"name": "20元以下",
							"per": {
								"$lt": 20
							},
						},
						{
							"name": "20-40元以",
							"per": {
								"$lte": 40,
								"$gte": 20
							},
						},
						{
							"name": "40元以上",
							"per": {
								"$gt": 40,
							},
						}
					]
				}]
			};
		},
		methods:{
			//综合排序
			multiple(){
				this.drop = true
				this.sortmen=false
				this.backOne()
			},
			
			
			//总和排序替换
			sortClick(index,name){
				this.synthesize = name
				this.num = index
				this.backClic()
			},
			//
			saLes(){
				this.backClic()
			},
			//筛选
			scReen(){
				this.drop=false
				this.sortmen = true
				this.backOne()
			},
			//透明背景
			backOne(){
				setTimeout(_=>{
					this.synthesize=name
					this.num=index
				},310)
			},
			//隐藏透明背景
			backClic(){
				this.ying=false
				this.drop=false
				this.sortmen = false
			}
		}
	}
</script>

<style scoped>
	/* 筛选 */
	.prefer-posi {
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 99;
	}

	.delica-view image {
		width: 30rpx;
		height: 30rpx;
		display: block;
	}

	.delica-view {
		font-size: 30rpx;
		display: flex;
		align-items: center;
		color: #666;
		padding: 0 15rpx;
		background: #fff;
	}

	.delica-list {
		display: flex;
		align-items: center;
	}

	.delica-right {
		justify-content: flex-end;
		flex-grow: 5;
	}

	.delica-grow {
		flex-grow: 1;
	}

	/* 排序 */
	.sortlist {
		background: #fff;
	}

	.sortliteltle text {
		padding: 0 15rpx;
		display: block;
		font-size: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-top: 1rpx solid #ededed;
	}

	.activeb {
		color: #f89903 !important;
	}

	/* 选择 */
	.sortlist-view {
		height: 700rpx;
		overflow: hidden;
		overflow-y: scroll;
		position: relative;
	}

	.sortlist-title {
		padding: 0 15rpx;
		font-size: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.choice {
		font-size: 28rpx;
		background: #f8f8f8;
		height: 55rpx;
		line-height: 55rpx;
		color: #666;
		width: calc((100%/3)-15px) !important;
		margin: 7.5rpx;
	}

	.sortlist-flex {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.sortlist-bottom {
		background: #fff;
		height: 80rpx;
		border-top: 1rpx solid #e4e4e4;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.sortlist-bottom text {
		flex-grow: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.sortlist-bottom text:nth-child(1) {
		border-right: 1rpx solid #e4e4e4;
	}

	.sortlist-bottom text:nth-child(2) {
		background: #ffd348;
	}

	/* 多选 */
	.scractive {
		background: #fef6df !important;
		color: #f29909 !important;
	}
</style>
